<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生活服务 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .map-container {
            position: relative;
            height: 50vh;
            background-color: #e5e7eb;
            overflow: hidden;
        }
        .service-filter {
            position: absolute;
            top: 16px;
            left: 16px;
            right: 16px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 10;
        }
        .filter-tabs {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            padding: 0 8px;
        }
        .filter-tab {
            padding: 12px 16px;
            font-size: 14px;
            position: relative;
        }
        .filter-tab.active {
            color: #0052d9;
            font-weight: 500;
        }
        .filter-tab.active::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 16px;
            right: 16px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 3px;
        }
        .service-panel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-radius: 24px 24px 0 0;
            padding: 20px;
            z-index: 20;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
        }
        .service-item {
            background: white;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .service-badge {
            background-color: rgba(0,82,217,0.1);
            color: #0052d9;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 12px;
            margin-right: 6px;
        }
        .distance-tag {
            background-color: #f0f2f5;
            color: #666;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 12px;
        }
        .location-btn {
            position: absolute;
            right: 16px;
            bottom: 200px;
            width: 48px;
            height: 48px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 15;
        }
        .location-marker {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -100%);
            z-index: 5;
        }
        .map-point {
            position: absolute;
            transform: translate(-50%, -100%);
            z-index: 5;
            cursor: pointer;
        }
        .bottom-nav {
            border-top: 1px solid #eee;
            background: white;
            padding: 8px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        .bottom-nav-item.active {
            color: #0052d9;
        }
    </style>
</head>
<body>
    <div>
        <!-- 地图容器 -->
        <div class="map-container">
            <!-- 地图图片（实际项目中会替换为地图组件） -->
            <img src="https://images.unsplash.com/photo-1569336415962-a4bd9f69c9ff" alt="地图" class="w-full h-full object-cover">
            
            <!-- 服务类型筛选 -->
            <div class="service-filter">
                <div class="filter-tabs">
                    <div class="filter-tab active">全部</div>
                    <div class="filter-tab">酒店</div>
                    <div class="filter-tab">美食</div>
                    <div class="filter-tab">购物</div>
                    <div class="filter-tab">康养</div>
                    <div class="filter-tab">交通</div>
                </div>
            </div>
            
            <!-- 定位按钮 -->
            <div class="location-btn">
                <i class="t-icon t-icon-location text-blue-600"></i>
            </div>
            
            <!-- 当前位置标记 -->
            <div class="location-marker">
                <div class="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
                    <div class="w-2 h-2 bg-white rounded-full"></div>
                </div>
                <div class="w-12 h-12 rounded-full bg-blue-600 bg-opacity-20 -mt-9 mx-auto"></div>
            </div>
            
            <!-- 地图上的服务点标记 -->
            <div class="map-point" style="top: 38%; left: 35%;">
                <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white text-xs">餐</div>
            </div>
            
            <div class="map-point" style="top: 42%; left: 60%;">
                <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-xs">住</div>
            </div>
            
            <div class="map-point" style="top: 48%; left: 42%;">
                <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-white text-xs">购</div>
            </div>
            
            <div class="map-point" style="top: 35%; left: 55%;">
                <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs">养</div>
            </div>
        </div>
        
        <!-- 服务列表面板 -->
        <div class="service-panel">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold">附近服务</h2>
                <div class="text-sm text-gray-500">共28个服务点</div>
            </div>
            
            <div class="space-y-4 max-h-72 overflow-y-auto pb-20">
                <!-- 服务项目1 -->
                <div class="service-item p-4">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="flex items-center mb-2">
                                <h3 class="font-bold">青岩古镇客栈</h3>
                                <span class="ml-2 text-xs text-orange-500">4.8分</span>
                            </div>
                            <div class="flex flex-wrap mb-2">
                                <span class="service-badge">私家温泉</span>
                                <span class="service-badge">特色民宿</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">环境优美，提供地道的苗家风味餐点，拥有私家温泉池</p>
                            <div class="flex justify-between items-center">
                                <div class="text-sm text-blue-600 font-medium">¥398起</div>
                                <div class="distance-tag">
                                    <i class="t-icon t-icon-location text-xs"></i>
                                    <span>500m</span>
                                </div>
                            </div>
                        </div>
                        <div class="ml-3">
                            <div class="w-20 h-20 bg-gray-200 rounded-lg overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945" alt="青岩古镇客栈" class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 服务项目2 -->
                <div class="service-item p-4">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="flex items-center mb-2">
                                <h3 class="font-bold">林间瑜伽馆</h3>
                                <span class="ml-2 text-xs text-orange-500">4.9分</span>
                            </div>
                            <div class="flex flex-wrap mb-2">
                                <span class="service-badge">森林瑜伽</span>
                                <span class="service-badge">冥想疗愈</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">森林环绕，负氧离子含量高，专业瑜伽教练带领，缓解都市压力</p>
                            <div class="flex justify-between items-center">
                                <div class="text-sm text-blue-600 font-medium">¥128/次</div>
                                <div class="distance-tag">
                                    <i class="t-icon t-icon-location text-xs"></i>
                                    <span>680m</span>
                                </div>
                            </div>
                        </div>
                        <div class="ml-3">
                            <div class="w-20 h-20 bg-gray-200 rounded-lg overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1575052814086-f385e2e2ad1b" alt="林间瑜伽馆" class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 服务项目3 -->
                <div class="service-item p-4">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="flex items-center mb-2">
                                <h3 class="font-bold">贵州风味馆</h3>
                                <span class="ml-2 text-xs text-orange-500">4.7分</span>
                            </div>
                            <div class="flex flex-wrap mb-2">
                                <span class="service-badge">当地特色</span>
                                <span class="service-badge">健康食材</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">使用当地生态食材，提供酸汤鱼、丝娃娃等地道贵州美食</p>
                            <div class="flex justify-between items-center">
                                <div class="text-sm text-blue-600 font-medium">人均¥88</div>
                                <div class="distance-tag">
                                    <i class="t-icon t-icon-location text-xs"></i>
                                    <span>350m</span>
                                </div>
                            </div>
                        </div>
                        <div class="ml-3">
                            <div class="w-20 h-20 bg-gray-200 rounded-lg overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d" alt="贵州风味馆" class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 服务项目4 -->
                <div class="service-item p-4">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="flex items-center mb-2">
                                <h3 class="font-bold">苗族手工艺品店</h3>
                                <span class="ml-2 text-xs text-orange-500">4.6分</span>
                            </div>
                            <div class="flex flex-wrap mb-2">
                                <span class="service-badge">手工银饰</span>
                                <span class="service-badge">蜡染工艺</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">贵州传统手工艺品，苗族银饰、蜡染服饰、竹编工艺等</p>
                            <div class="flex justify-between items-center">
                                <div class="text-sm text-gray-600 font-medium">9:00-21:00</div>
                                <div class="distance-tag">
                                    <i class="t-icon t-icon-location text-xs"></i>
                                    <span>420m</span>
                                </div>
                            </div>
                        </div>
                        <div class="ml-3">
                            <div class="w-20 h-20 bg-gray-200 rounded-lg overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1534113414509-0eec2bfb493f" alt="苗族手工艺品店" class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-home"></i>
            <span>首页</span>
        </div>
        <div class="bottom-nav-item active">
            <i class="t-icon t-icon-location"></i>
            <span>周边</span>
        </div>
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-shop"></i>
            <span>商城</span>
        </div>
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-user"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 